<template>
  <!-- 申请身份认证 -->
  <div style="padding-bottom: 30px" class="font-26 authentication">
    <assets-head :title="$t('进阶认证')" />
    <!-- <country-list /> -->
    <div v-if="show">
         <div class=" pt-58 pb-54 box-border border-b-color" v-if="disabled() || status === 3">
           <div class="flex justify-between items-center px-30 textColor">
             <div class="font-50">{{ $t('身份认证') }}</div>
             <div class="flex items-center" v-if="resultArr[this.status]">
               <img
                 :src="require(`@/assets/image/assets-center/${resultArr[this.status] && resultArr[this.status].split('_')[0]}.png`)"
                 alt="success img" class="w-36 h-36" />
               <div class="font-32 ml-18">{{resultArr[this.status] && resultArr[this.status].split('_')[1] }}</div>
             </div>
           </div>
         </div>
         <div class="pl-30 pr-30">
           <div class="mb-40">
             <div class="mt-54 mb-25 font-24 textColor">{{ $t('国籍') }}</div>
             <div class="pt-28 pb-28 pl-38 pr-38 flex justify-between items-center rounded inputBackground textColor" @click="openBtn">
               <div class="flex items-center">
                 <!-- <div class="iti-flag mr-20" :class="countryCode" style="transform: scale(2.1)"></div> -->
                 <div>{{ countryName }}</div>
               </div>
         
               <img v-if="resultArr.length === 0" src="../../assets/image/public/down-arrow.png" class="w-33 h-20" alt="arrow" />
             </div>
           </div>
           <ExInput :label="$t('真实姓名')" :disabled="disabled()" :clearBtn="!disabled()" :placeholderText="$t('请输入真实姓名')"
             v-model="name" />
           <ExInput :label="$t('证件/护照号码')" :disabled="disabled()" :clearBtn="!disabled()" :placeholderText="$t('请输入您的证件/护照号码')"
             v-model="idnumber" />
           <div>
             <div v-if="resultArr.length > 0" class="mt-4 mb-25 textColor">{{ $t('证件照/上传护照') }}</div>
             <div v-else class="mt-4 mb-25 textColor">{{ $t('证件/护照认证图片上传') }}</div>
             <div class="flex mt-33 mb-80 justify-between">
               <div class="flex-1 flex flex-col text-center justify-center items-center">
                 <div class="upload-wrap">
                   <img src="@/assets/image/kyc/0.png" alt="" class="w-full"
                     v-if="[1,2].includes(status) && frontFile.length === 0" />
                   <van-uploader v-model="frontFile" multiple :max-count="1" :disabled="disabled()" :deletable="!disabled()"
                     :after-read="afterRead" @click-upload="onClickUpload('frontFile')" v-else />
                 </div>
                 <div class="mt-32 font-26 h-20" style="color:#868D9A;">{{ $t('证件正面') }}</div>
               </div>
               <div class="flex-1 flex flex-col text-center justify-center items-center">
                 <div class="upload-wrap">
                   <img src="@/assets/image/kyc/1.png" alt="" class="w-full"
                     v-if="[1,2].includes(status) && reverseFile.length === 0" />
                   <van-uploader v-model="reverseFile" multiple :max-count="1" :disabled="disabled()" :deletable="!disabled()"
                     :after-read="afterRead" @click-upload="onClickUpload('reverseFile')" v-else />
                 </div>
                 <div class="mt-32 font-26 h-20" style="color:#868D9A;">{{ $t('证件反面') }}</div>
               </div>
               <div class="flex-1 flex flex-col text-center justify-center items-center">
                 <div class="upload-wrap">
                   <img src="@/assets/image/kyc/2.png" alt="" class="w-full"
                     v-if="[1,2].includes(status) && fileList.length === 0" />
                   <van-uploader v-model="fileList" multiple :max-count="1" :disabled="disabled()" :deletable="!disabled()"
                     :after-read="afterRead" @click-upload="onClickUpload('fileList')" v-else />
                 </div>
                 <div class="mt-32 font-26 h-20" style="color:#868D9A;">{{ $t('手持证件照') }}</div>
               </div>
             </div>
           </div>
           <template v-if="!disabled()">
             <div class="font-35 mb-32 textColor">{{ $t('拍摄示例') }}</div>
             <img src="../../assets/image/kyc/kyc-demo.png" alt="" style="width:100%;height:auto;" class="w-756 h-220 mb-100">
           </template>
           <button class="apply-btn btnMain font-35 h-100 rounded" @click="onSubmit" v-if="!disabled()">{{
           $t('申请认证') }}</button>
           <div class="pt-35 pb-60 font-30" v-if="!disabled() || status === 3">
             <span class="text-grey">{{ $t('上传证件照失败，请联系客服获取邮箱地址发送证件照或者重新上传') }}</span>
             <span class="text-blue service-text" @click="tokefu"> {{ $t('联系客服') }}</span>
           </div>
           <nationality-list ref='controlChild' :title="$t('请选择国家')" @getName="getName(arguments)" v-if="!disabled()">
           </nationality-list>
         </div>
    </div>
  </div>
</template>

<script>
// import { ActionSheet,Search } from 'vant';
import assetsHead from "@/components/assets-head";
import nationalityList  from './components/nationalityList.vue'
import { Uploader} from 'vant';
import { _uploadImage, _applyIdentify, _getIdentify } from '@/API/fund.api'
// import CountryList from '@/components/country-list' // 我页不知道为啥要先调用这个，先放着
import countries from "./components/countryList";
import ExInput from "@/components/ex-input";
export default {
    name:"AuthenticationPage",
    components:{
        assetsHead,
        nationalityList,
        [Uploader.name]:Uploader,
      ExInput
        // CountryList
    },
    data() {
        return {
            countryName:this.$t("请选择国家"), //国家名称
            countryCode:"af", //国家地区号
            idnumber: '',
            name: '',
            frontFile:[],
            reverseFile:[],
            fileList:[],
            curFile: 'frontFile',
            status: '', // 0
            imgs: [],
            idcard_path_front_path: '',
            idcard_path_back_path: '',
            idcard_path_hold_path: '',
            resultArr: ['small-success_' + this.$t('已申请未审核'), 'identifing_' + this.$t('审核中'), 'small-success_' + this.$t('审核通过'), 'icon-close_' + this.$t('审核未通过')], // 0 好像是未提交
            show:false,
            language: 'en',
        }
    },
    created() {
      this.language = this.$i18n.locale
      this.fetchInfo()
    },
    methods:{
        fetchInfo() {   // 获取状态
            _getIdentify().then(data => {
              this.show = true
                this.status = data.status
                if (data.status !== 0) {
                  this.countryName = countries[this.language][data.nationality.toLowerCase()]['name']
                    this.countryCode = data.nationality.toLowerCase()
                    this.idnumber = data.idnumber
                    this.name = data.name
                    this.frontFile = data.idimg_1 ? [{ url: data.idimg_1_path, resURL: data.idimg_1 }] : []
                    this.reverseFile = data.idimg_2 ? [{ url: data.idimg_2_path, resURL: data.idimg_2 }] : []
                    this.fileList = data.idimg_3 ? [{ url: data.idimg_3_path, resURL: data.idimg_3 }] : []
                }
            })
        },
        onClickUpload(type) {
            this.curFile = type
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        disabled() { // 是否禁用按钮
            return ![0, 3, ''].includes(this.status)
        },
        afterRead(file) { /// 处理文件
          console.log(file)
            file.status = 'uploading'
            file.message = this.$t('上传中...')
            _uploadImage(file).then(data => {
                file.status = 'success';
                file.message = this.$t('上传成功');
                file.resURL = data
                this[this.curFile] = [file]
            }).catch(err => {
              file.status = 'failed';
              file.message = this.$t('图片上传失败');
            })
        },
        //打开国家列表底部弹窗
        openBtn() {
          if (!this.disabled()) {
            this.$refs.controlChild.open();
          }
        },
        //获取到当前选中国家的code值
        getName(params) {
            this.countryName = params[0];
            this.countryCode = params[1];
        },
        onSubmit() {
            if (!this.countryName) {
                this.$toast(this.$t('请选择国家'))
                return
            }
            if (!this.name) {
                this.$toast(this.$t('请输入姓名'))
                return
            }
            if (!this.idnumber) {
                this.$toast(this.$t('请输入证件号码'))
                return
            }
            // if (!this.frontFile.length || !this.reverseFile.length ||!this.fileList.length) {
            //     this.$toast(this.$t('请上传完整证件信息'))
            //     return
            // }
            _applyIdentify({
                name: this.name,
                idnumber: this.idnumber,
                frontFile: this.frontFile,
                reverseFile:  this.reverseFile ,
                fileList: this.fileList,
                countryName: this.countryCode // this.countryName 存储的 code, 回来再遍历
            }).then(() => {
                this.$toast(this.$t('提交成功'))
                this.$router.push('/verified')
                // this.fetchInfo()
            }).catch(err => {
              if(err.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}              
              else if(err.msg !== undefined){this.$toast(this.$t(err.msg));}      
            })
        },
        tokefu() {
          this.$router.push('/customerService')
        }
    }
}
</script>
<style lang="scss" scoped>

.authentication{
  width: 100%;
  box-sizing: border-box;
}
.upload-wrap {
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}
input {
  font-size: 35px;
}
input:disabled {
  background: #fff;
}
.list-view{
    overflow-y:scroll;
    border-bottom:1px solid #e5e5e5;
}

.kyc-input{
    width:100%;
    border:none;
}

.apply-btn{
    border:none;
    outline:none;
    width:100%;
    line-height:100px;
}

.service-text{
    text-decoration:underline;
}

</style>
